<template>
  <div>
    <div ref="adverseTrends"></div>
  </div>
</template>
<script>
import {req} from "../../../api/axiosFun";
export default {
  props:['repairDate'],
  data() {
    return{
      adverseTrendsList:[],
      myChart: null,
      colors:[
        [
          {
            offset: 0,
            color: 'rgb(255,52,138)',
          },
          {
            offset: 1,
            color: 'rgb(255,52,138, 0.1)',
          },
        ],
        [
          {
            offset: 0,
            color: 'rgb(255,52,238)',
          },
          {
            offset: 1,
            color: 'rgb(255,52,238, 0.1)',
          },
        ],
        [
          {
            offset: 0,
            color: 'rgb(52,92,255)',
          },
          {
            offset: 1,
            color: 'rgb(52,92,255, 0.1)',
          },
        ],
        [
          {
            offset: 0,
            color: 'rgb(52,200,255)',
          },
          {
            offset: 1,
            color: 'rgb(52,200,255, 0.1)',
          },
        ],
        [
          {
            offset: 0,
            color: 'rgb(52,255,167)',
          },
          {
            offset: 1,
            color: 'rgb(52,255,167, 0.1)',
          },
        ]
      ]
    }
  },
  watch:{
    repairDate(val){
      this.getMaterialQuestionStatistics(val)
    }
  },
  mounted() {
    this.getMaterialQuestionStatistics(this.repairDate)
    this.myChart = this.$echarts.init(this.$refs.adverseTrends);
  },
  methods:{
    //元器件不良趋势统计
    getMaterialQuestionStatistics(repairDate) {
      req('post', `dataBoard/getMaterialQuestionStatistics`,{repairDate})
        .then(res => {
          if (res.result === 'success') {
            this.showLines(res.data)
          }
        })
    },
    showLines(data){
      this.myChart.clear()
      var materialType = data.materialType
      let datax = [],legendData = [],series=[];
      datax = data.days.map(item=>item.substring(5,10))
      materialType.forEach((item,index)=>{
        item.data = []
        data.days.forEach((x,i)=>{
          item.data.push(0)
          data.materialQuestionStatistics.forEach(y=>{
            if(y.repairDatetime==x&&y.materiaCode==item.dicValue) {
              item.data[i] = y.materiaCount
            }
          })
        })
        legendData.push(item.dicDisplayName)
        series.push({
          name: item.dicDisplayName,
          type: 'line',
          stack: 'Total',
          areaStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                this.colors[index],
                false
              ),
            },
          },
          emphasis: {
            focus: 'series'
          },
          data: item.data
        })
      })
      var option = {
        color: ['#ff348a','#ff34ee','#345cff','#34c8ff','#34ffa7'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: legendData
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: datax,
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        grid: {
          left: '1%',
          right: '2%',
          bottom: '3%',
          containLabel: true
        },
        series: series
      }
      this.myChart.setOption(option)
    }
  }
}
</script>
<style scoped>
@import "../../../assets/css/maincss.css";
#adverseTrends {
  height: 236px;
  margin-top: 6px;
}
</style>
